<template>
  <div v-if="data">
    <Topbar />
    <div class="app-container" v-if="this.data.length != 0">
      <p>心愿单</p>
      <div
        class="meka-browsing-card"
        v-for="(item, i) in data"
        :key="item.products.id"
      >
        <div class="meka-browsing-card__cover--loaded">
          <img :src="item.products.productComparisonImageUrl" alt="" />
        </div>
        <div class="meka-browsing-card__details">
          <div class="icon">
            <img :src="item.famili.iconUrl" alt="" />
          </div>
          <h5>{{ item.title }}: {{ item.products.name }}</h5>
          <span>{{ item.notifications[0] }}</span>
          <p>{{ item.description }}</p>
        </div>
        <div class="meka-browsing-card__utilities">
          <div class="price" v-if="item.products.price.price.discount">
            {{ item.products.price.price.discount }}
          </div>
          <div class="price" v-else>{{ item.products.price.price.full }}</div>
          <div class="product-buttons">
            <button class="gm">立即购买</button>
            <button class="yc" @click="delShopCar(i)">移除</button>
          </div>
        </div>
      </div>
    </div>
    <div class="container" v-else>
      <div>您的心愿单中没有任何物品。</div>
      <div>探索战网商城，将心仪的物品添加至您的心愿单吧。</div>
      <button @click="goHome">前往商城主页</button>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/footer.vue";
import Topbar from "../components/topbar.vue";
export default {
  components: { Topbar, Footer },
  data() {
    return {
      data: "",
    };
  },
  mounted() {
    this.data = this.$store.state.shopCart;
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    // 删除商品
    delShopCar(i) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认将这1件商品删除?",
          confirmButtonText: "删除",
          cancelButtonText: "我再想想",
          confirmButtonColor: "black",
          cancelButtonColor: "#ee0a24",
        })
        .then((res) => {
          if (confirm) {
            this.data.splice(i, 1);
            this.$store.commit("delShopCar", this.shopCart);
            if (this.data.length == 0) {
              sessionStorage.removeItem("shopCart");
            } else {
              sessionStorage.setItem("shopCart", JSON.stringify(this.data));
            }
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/wishlist.css");
</style>
